<style>
li img {max-width:160px; height:90px;}
.layui-input-block .layui-table td {border: none}
.cases-imgs li {display: inline-block; text-align: center; width: 160px; height: 200px; background-color: #eeeeee; padding: 0 5px; margin: 5px; position:relative;}
.cases-imgs li p {margin: 10px 0;}
.cases-imgs li img {max-width: 160px; height: 90px;}
.cases-imgs li i {max-width: 160px; height: 90px;}
.cases-imgs li .cases-img-move {margin: 0 2px;}
.cases-imgs li .cases-img-del {margin-top: 4px;}
.layui-elem-field {padding: 10px;}
</style>

<input type="hidden" name="cases.id" value="#(cases.id)">

<div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label layui-bg-blue">状态</label>
		<div class="layui-input-inline">
			<input type="radio" name="cases.status" value="on" title="启用" #if(cases.status == 'on' || cases.status == null) checked #end>
			<input type="radio" name="cases.status" value="off" title="禁用" #if(cases.status == 'off') checked #end>
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label layui-bg-blue">排序号：</label>
		<div class="layui-input-inline">
			<input type="text" name="cases.sortNum" lay-verify="required" autocomplete="off" class="layui-input" value="#(cases.sortNum)">
		</div>
	</div>
</div>

<div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label layui-bg-blue">标题</label>
		<div class="layui-input-inline">
			<input type="text" name="cases.title" lay-verify="required|title" placeholder="请输入标题" autocomplete="off" class="layui-input" value="#(cases.title)">
		</div>
	</div>
</div>

<div class="layui-form-item">
	<label class="layui-form-label">子标题</label>
	<div class="layui-input-block">
		<input type="text" name="cases.subtitle" placeholder="" class="layui-input" value="#(cases.subtitle)">
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">标签</label>
	<div class="layui-input-block">
		<select name="cases.tags" xm-select="case_tags_selects">
	#tagList()
		#for(tag : tagList)
			<option value="#(tag.name)" #if(cases.tagList.contains(tag.name))selected#end>#(tag.name)</option>
		#end
	#end
		</select>
	</div>
</div>
<div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label layui-bg-blue">原始点击数</label>
		<div class="layui-input-inline">
			<input type="text" name="cases.baseHits" lay-verify="required|number" autocomplete="off" class="layui-input" value="#(cases.baseHits)">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">点击数</label>
		<div class="layui-input-inline">
			<input type="text" name="cases.hits" disabled lay-verify="required|number" autocomplete="off" class="layui-input layui-disabled" value="#(cases.hits)">
		</div>
	</div>
</div>

<div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label layui-bg-blue">分类</label>
		<div class="layui-input-inline">
			<select name="cases.categoryId">
				<option value="">-- 请选择 --</option>
				#for(casesCategory : casesCategoryList)
				<option value="#(casesCategory.id)" #if(cases.categoryId == casesCategory.id) selected #end>#(casesCategory.name)</option>
				#end
			</select>
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label layui-bg-blue">置顶</label>
		<div class="layui-input-inline">
			<input type="radio" name="cases.onTop" value="true" title="是" #if(cases.onTop || cases.status == null) checked #end>
			<input type="radio" name="cases.onTop" value="false" title="否" #if(!cases.onTop) checked #end>
		</div>
	</div>
</div>
<div class="layui-form-item">
	<label class="layui-form-label">关键字</label>
	<div class="layui-input-block">
		<input type="text" name="cases.keywords" placeholder="关键字用英文逗号隔开" class="layui-input" value="#(cases.keywords)">
	</div>
</div>
<div class="layui-form-item layui-form-text">
	<label class="layui-form-label">描述</label>
	<div class="layui-input-block">
		<textarea placeholder="" name="cases.remark" class="layui-textarea">#(cases.remark)</textarea>
	</div>
</div>

<fieldset class="layui-elem-field">
	<legend>内容图片</legend>
	<div class="layui-row layui-form">
		<input id="ID_cases_img_size" type="hidden" name="casesImgSize" value="#(casesImageList.size())">
		<ul class="cases-imgs">
			<li>
				<p>
					<div class="layui-row">
						<div class="layui-col-xs12">
							<a class="btn-add-img" data-type="addImage"><i class="layui-icon layui-icon-add-1" style="font-size: 160px;"></i></a>
						</div>
					<div class="layui-row">
				</p>
			</li>
			#for(casesImage : casesImageList)
			<li class="image-item" id="ID_img_idx_#(for.index)">
				<p>
					<div class="layui-row">
						<div class="layui-col-xs12">
							<a class="btn-set-img" data-type="changeImage">
								<input class="cls-status" type="hidden" name="status[]" value="old">
								<input class="cls-image" type="hidden" name="images[]" value="#(casesImage.img)">
								<input class="cls-id" type="hidden" name="imgIds[]" value="#(casesImage.id)">
								<input class="cls-sort-num" type="hidden" name="sortNums[]" value="#(casesImage.sortNum)">
								<img src="#(casesImage.img)">
							</a>
						</div>
					</div>
				</p>
				<p>
					<div class="layui-row">
				        <div class="layui-col-xs6"><a data-type="moveLeft" class="layui-btn layui-btn-sm layui-btn-normal cases-img-move"><i class="layui-icon layui-icon-left"></i></a></div>
				        <div class="layui-col-xs6"><a data-type="moveRight" class="layui-btn layui-btn-sm layui-btn-normal cases-img-move"><i class="layui-icon layui-icon-right"></i></a></div>
				    </div>
				</p>
				<p>
					<div class="layui-row" class="cases-img-move">
						<div class="layui-col-xs9" align="left">
							<select class="img-device layui-btn-sm" name="devices[]">
							#dictList(parentKey="device_type")
								#for(dict : dictList)
								<option value="#(dict.key)" #if(for.first)selected#end >#(dict.value)</option>
								#end
							#end
							</select>
						</div>
						<div class="layui-col-xs3"><a data-type="removeImage" class="layui-btn layui-btn-sm layui-btn-danger cases-img-del" data-type="delImage"><i class="layui-icon layui-icon-delete"></i></a></div>
					</div>
				</p>
			</li>
			#end
		</ul>
		<ul id="ID_cases_imgs_remove" style="width: 0px; height: 0px;">
		</ul>
	</div>
</fieldset>

<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title">
		<li class="layui-this"><i class="layui-icon layui-icon-website"></i>  桌面端</li>
		<li><i class="layui-icon layui-icon-cellphone"></i>  移动端</li>
	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show">
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-block">
					<ul>
						<li class="hide_in_view">
							<table class="layui-table">
								<tr>
									<td width="10px">
										<input type="hidden" id="ID_img_url" name="cases.img" value="#(cases.img)">
										<button type="button" class="layui-btn jfsa-select-image" id="ID_img_upload" jfsa-input="ID_img_url" jfsa-img="ID_img">设置</button>
									</td>
									<td>
										<div class="layui-form-mid layui-word-aux"></div>
									</td>
								</tr>
							</table>
						</li>
						<li>
							<img onclick="Jfsa.reviewImage(this);" src="#(cases.img)" id="ID_img">
						</li>
					</ul>
				</div>
			</div>

			<textarea id="ID_case_content">#(cases.content)</textarea>
			<textarea id="ID_case_content_input" name="cases.content" style="display: none;">#(cases.content)</textarea>
		</div>

		<div class="layui-tab-item">
			<blockquote class="layui-elem-quote">内容为空时采用桌面端内容</blockquote>

			<div class="layui-form-item">
				<label class="layui-form-label">　图片　<br>（移动端）</label>
				<div class="layui-input-block">
					<ul>
						<li class="hide_in_view">
							<table class="layui-table">
								<tr>
									<td width="10px">
										<input type="hidden" id="ID_img_h5_url" name="cases.imgH5" value="#(cases.imgH5)">
										<button type="button" class="layui-btn jfsa-select-image" id="ID_img_h5_upload" jfsa-input="ID_img_h5_url" jfsa-img="ID_img_h5">设置</button>
									</td>
									<td>
										<div class="layui-form-mid layui-word-aux"></div>
									</td>
								</tr>
							</table>
						</li>
						<li>
							<img onclick="Jfsa.reviewImage(this);" src="#(cases.imgH5)" id="ID_img_h5">
						</li>
					</ul>
				</div>
			</div>

			<textarea id="ID_case_content_h5">#(cases.contentH5)</textarea>
			<textarea id="ID_case_content_h5_input" name="cases.contentH5" style="display: none;">#(cases.contentH5)</textarea>
		</div>
	</div>
</div>

<fieldset class="layui-elem-field">
	<legend>SEO设置</legend>
	<blockquote class="layui-elem-quote">内容为空时采用全局设置</blockquote>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-inline">
				<input type="text" name="cases.seoTitle" placeholder="请输入SEO关键词" class="layui-input" value="#(cases.seoTitle)">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">关键词</label>
		<div class="layui-input-block">
			<input type="text" name="cases.seoMetaKeywords" placeholder="用英文逗号隔开各关键词" class="layui-input" value="#(cases.seoMetaKeywords)">
		</div>
	</div>
	<div class="layui-form-item layui-form-text">
		<label class="layui-form-label">描述</label>
		<div class="layui-input-block">
			<textarea name="cases.seoMetaDescription" placeholder="请输入SEO描述" class="layui-textarea">#(cases.seoMetaDescription)</textarea>
		</div>
	</div>
</fieldset>

<script type="text/html"  id="ID_img_box_tpl" >
<li class="image-item" id="ID_img_idx_{{ d.index }}">
	<p>
		<div class="layui-row">
			<div class="layui-col-xs12">
				<a class="btn-set-img" data-type="changeImage">
					<input class="cls-status" type="hidden" name="status[]" value="{{ d.status }}">
					<input class="cls-image" type="hidden" name="images[]" value="{{ d.image }}">
					<input class="cls-id" type="hidden" name="imgIds[]" value="">
					<input class="cls-sort-num" type="hidden" name="sortNums[]" value="">
					<img src="{{ d.image }}">
				</a>
			</div>
		</div>
	</p>
	<p>
		<div class="layui-row">
	        <div class="layui-col-xs6"><a data-type="moveLeft" class="layui-btn layui-btn-sm layui-btn-normal cases-img-move"><i class="layui-icon layui-icon-left"></i></a></div>
	        <div class="layui-col-xs6"><a data-type="moveRight" class="layui-btn layui-btn-sm layui-btn-normal cases-img-move"><i class="layui-icon layui-icon-right"></i></a></div>
	    </div>
	</p>
	<p>
		<div class="layui-row" class="cases-img-move">
			<div class="layui-col-xs9">
				<select class="img-device layui-btn-sm" name="devices[]">
				#dictList(parentKey="device_type")
					#for(dict : dictList)
					<option value="#(dict.key)" #if(for.first)selected#end >#(dict.value)</option>
					#end
				#end
				</select>
			</div>
			<div class="layui-col-xs3"><a data-type="removeImage" class="layui-btn layui-btn-sm layui-btn-danger cases-img-del"><i class="layui-icon layui-icon-delete"></i></a></div>
		</div>
	</p>
</li>
</script>